<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #fa {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            margin: 200px auto;
        }

        #fa>div {
            width: 33%;
            height: 33%;
            border: 1px solid black;
            float: left;
            text-align: center;
            font-size: 25px;
            font-weight: bold;
        }

        #start {
            cursor: pointer;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="fa">
        <div class="option">1</div>
        <div class="option">2</div>
        <div class="option">3</div>
        <div class="option">4</div>
        <div id="start">开始抽奖</div>
        <div class="option">5</div>
        <div class="option">6</div>
        <div class="option">7</div>
        <div class="option">8</div>
    </div>
</body>
<script>
    let but = document.getElementById('start');
    let options = document.getElementsByClassName('option');
    let timer = null; // 记录计时器的编号 (有值 => 计时器已经启动 null => 计时器还未启动,抽奖已经结束)

    // 防抖处理(等上一次结束才能启动下一次)  => 此写法如果是异步 => 需要专门处理
    // 1. 等上一次结束才能启动下一次 (当前案例)
    // 2. 某一段时间内重复触发,最后一次生效
    but.onclick = function () {
        let num = 0;
        if (timer != null) return false;  // 如果计时器已经启动 后续代码不执行

        timer = setInterval(() => {
            num++;
            let ran = Math.round(Math.random() * (7 - 0) + 0);
            for (let i = 0; i < options.length; i++) {
                options[i].style.backgroundColor = '#fff';
            }
            options[ran].style.backgroundColor = 'orange'
            if (num >= 50) {
                clearInterval(timer);
                timer = null;  // 等本次抽奖结束 =>  timer重置为null
            }
        }, 100);
    }
</script>

</html>